var $ = layui.$;
/**
 * 描述：照片配置-设置照片审核标准
 * @author liudi
 * @since 2022-1-24 15:25
 */
layui.define(['index', 'form', 'upload', 'zmnSelect', 'table'], function (exports) {
    let form = layui.form;
    let layer = layui.layer;
    let table = layui.table;
    let CONF_BASE_URL = '/conf/attachment/orderPicture';

    // 初始化参数
    let params = {
        standardList: json.standardList,
        /**
         * @returns {boolean} 列表中是否还剩最后一行
         */
        hasLastRow() {
            return Object.keys(table.cache).length == 1 && Object.values(table.cache)[0].length == 1;
        }
    }


    /**
     * 模板
     * @type {{operateFormat: (function(): string), newTableContainer: (function(*): string)}}
     */
    let templateFormatter = {
        /**
         * 操作列模板
         * @returns {string}
         */
        operateFormat: function () {
            // 仅有一个组且一个识别物时，不显示删除按钮
            let hasLastRow = params.hasLastRow();
            return (` ${hasLastRow ? '' : `<div> 
                                        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a> 
                                      </div>`}`)
        },
        /**
         * 表格容器模板
         * @param newContainerIndex 唯一下标数字
         * @returns {string} 表格模板
         */
        newTableContainer: function (newContainerIndex) {
            return (`
                        <div
                          id="zmn-audit-table-${newContainerIndex}"
                          lay-filter="zmn-audit-table-${newContainerIndex}"
                          style="margin-bottom: 20px">
                              <fieldset style="border-top: 1px solid transparent;
                                               background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-38deg,#ccc 0, #ccc 0.5em,white 0,white 0.75em);"
                                      class="layui-elem-field layui-field-title">
                                <legend align="center" style="background:white">OR</legend>
                            </fieldset>
                         <script type="text/html" id="zmn-table-tool-${newContainerIndex}">
                             <div class="layui-btn-container">
                                 <div class="layui-btn-group">
                                     <a href="javascript:;" lay-event="add-${newContainerIndex}"
                                        class="layui-btn layui-btn-sm layui-btn-primary"
                                        lay-text="新增" text="新增">添加识别物</a>
                                 </div>
                             </div>
                         </script>
                     </div>`)
        }
    }

    let cols = [[
        {field: 'id', hide: true},
        {field: 'identifier', title: '识别物', width: '33%', align: "center", edit: true},
        {field: 'score', title: '置信度', width: '33%', align: "center", edit: true},
        {
            title: '操作',
            align: "center",
            // 不满足 “审核标准组只有一组” 且 “审核标准组内只有一行数据” 时才展示删除按钮
            templet: templateFormatter.operateFormat
        }
    ]]


    /**
     * 获取第一个表格的id
     * @returns {string}
     */
    function getFirstlyTableContainerName() {
        let tableKeys = Object.keys(table.cache);
        return tableKeys[0];
    }

    /**
     * 获取最后一个表格的id
     * @returns {string}
     */
    function getLastlyTableContainerName() {
        let tableKeys = Object.keys(table.cache);
        return tableKeys[tableKeys.length - 1];
    }

    /**
     * 初始化表格
     * @param data
     */
    function initTable(data) {
        // 初始化表格数据
        if (data.length < 1) {
            table.cache["zmn-audit-table-0"] = [{}]
            renderTable(table.cache["zmn-audit-table-0"], 0)
            return;
        }
        // 渲染每个表格容器
        data.forEach((standardData, index) => {
            renderTable(standardData, index)
        })

        // 初始化完成后再重新渲染第一组，防止
        if (table.cache["zmn-audit-table-0"].length < 2) {
            table.reload("zmn-audit-table-0");
        }
    }

    /**
     * 初始化表单按钮事件
     */
    function initFormEvent() {

        form.render(null, "zmn-form");

        /**
         * 监听【保存】按钮
         */
        form.on('submit(zmn-form-submit)', function (obj) {

            let auditStandardList = [];
            let confAttachmentId = json.conf.id;
            let tableData = table.cache ? table.cache : [];
            var url = CONF_BASE_URL + '/save/auditDetection.action';

            console.log(tableData)
            try {
                Object.values(tableData).forEach((rowData) => {
                    if (!rowData || rowData.length < 1) {
                        return;
                    }
                    let tempArray = [];
                    Object.values(rowData).forEach((item, index, array) => {
                        //执行代码
                        if (!item['identifier'] || !item['score']) {
                            layer.msg("请完善数据");
                            // 跳出 foreach 循环
                            throw new Error("请完善数据");
                        }

                        tempArray.push(item);
                    })
                    auditStandardList.push(tempArray)

                });

                let data = {
                    confAttachmentId: confAttachmentId,
                    auditStandardList: auditStandardList
                };

                $.ajax({
                    async: false,
                    type: "POST",
                    url: url,
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success: function (result) {
                        if (result.status == 200) {
                            parent.layer.msg(result.message)
                            cancel();
                        } else {
                            layui.layer.msg(result.message, {"icon": 2});
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                    }
                })
            } catch (e) {
                return false;
            }
            return false;
        });

        /**
         * 监听【增加一组识别物】按钮
         */
        form.on('submit(zmn-add-audit)', function (obj) {
            if (Object.keys(table.cache).length > 2) {
                layer.msg("最多添加3组审核标准！！");
                return false;
            }

            // 获取最后一个数据表格的index， 并在其基础上加1作为新表格的index
            let lastTableName = getLastlyTableContainerName();
            let lastTableIndex = lastTableName.substring(lastTableName.lastIndexOf("-") + 1, lastTableName.length)
            let newTableIndex = parseInt(lastTableIndex) + 1

            table.cache["zmn-audit-table-" + newTableIndex] = [{}]
            $("#tablesParent").append(templateFormatter.newTableContainer(newTableIndex))
            renderTable(table.cache["zmn-audit-table-" + newTableIndex], newTableIndex)

            // 绑定表格触发的事件
            bindTableEvent(newTableIndex);

            // 重载之前的最后一个表格 防止出现新增一组后，之前最后一组中的最后一条数据还没有删除按钮
            table.reload(lastTableName)

            // 阻止页面刷新
            return false;
        });
    }

    /**
     * 初始化表格内事件
     * @param data
     */
    function initTableEvent(data) {
        if (data.length < 1) {
            bindTableEvent(0)
            return;
        }
        data.forEach((standardData, index) => {
            bindTableEvent(index);
        })
    }

    /**
     * 渲染指定表格容器
     * @param data 数据
     * @param index 唯一下标
     */
    function renderTable(data, index) {
        table.render({
            elem: '#zmn-audit-table-' + index,
            toolbar: "#zmn-table-tool-" + index,
            defaultToolbar: [],
            cols,
            data: data,
            page: false,
        });
    }

    /**
     * 绑定表格的事件
     * @param index 容器唯一id
     */
    function bindTableEvent(index) {

        /**
         * 表格工具栏
         */
        table.on('toolbar(zmn-audit-table-' + index + ')', function (obj) {
            // 事件格式：add-1， 按照 “-” 切割，数字是下标
            let [event, index] = obj.event.split("-");
            let data = table.cache['zmn-audit-table-' + index];

            switch (event) {
                case 'add':
                    if (data.length > 4) {
                        layer.msg("每组最多添加5个识别物！！");
                        break;
                    }

                    // 重新渲染
                    data.push({});
                    renderTable(data, index);

                    console.log("表格工具栏：", Object.values(table.cache)[0].length, "表格：", table.cache)
                    break;
            }
        });

        /**
         * 监听 【操作】列
         */
        table.on('tool(zmn-audit-table-' + index + ')', function (obj) {
            // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let layEvent = obj.event;
            if (layEvent === 'del') {

                // 删除表格中对应的数据
                let currentData = table.cache['zmn-audit-table-' + index];
                let dataIndex = currentData.findIndex(({identifier}) => identifier === obj.data.identifier);
                currentData.splice(dataIndex, 1)

                if (currentData.length > 0) {
                    // 重新渲染
                    renderTable(currentData, index);
                    return;
                }

                // 如果是当前表格中最后一条数据，那么删除这个数据的同时 也删除表格
                let containerId = "zmn-audit-table-" + index;
                $("#" + containerId).remove();
                $("div[lay-id=" + containerId + "]").remove();

                // 删除Layui的表格缓存（走到这步，当前对应表格的数据已经没有了，但layui还将这个空数组保存起来，这步是为了删除掉空数组）
                delete table.cache['zmn-audit-table-' + index]

                // 如果是最后一行
                if (params.hasLastRow()) {
                    let lastTableName = getLastlyTableContainerName()

                    // 重载表格 防止出现两个列表中仅剩一条数据时 ，再删除某个列表中的最后一条数据导致最后列表中的最后一条数据还有删除按钮。
                    table.reload(lastTableName);
                }

                let firstTableName = getFirstlyTableContainerName();
                $("#" + firstTableName + " fieldset").remove()
            }
        });

        /**
         * 监听【编辑】列
         */
        table.on('edit(zmn-audit-table-' + index + ')', function (obj) {
            let value = obj.value.trim();
            let tempVal = obj.value.trim();

            let tableData = table.cache['zmn-audit-table-' + index] ? table.cache['zmn-audit-table-' + index] : [];

            if (obj.field === 'identifier') {
                if (obj.value.length > 256) {
                    layer.msg("长度不得超过256");
                    tempVal = obj.value.substring(0, 256);
                }

                let count = 0;
                tableData.forEach((rowData, index, array) => {
                    console.log("foreach：", rowData)
                    if (!rowData || rowData.length < 1) {
                        return;
                    }
                    if (rowData['identifier'].trim() === value) {
                        count = count + 1;
                    }
                });
                if (count > 1) {
                    layer.msg("不允许有重复名称");
                    tempVal = "";
                }
                obj.update({
                    identifier: tempVal
                });
            } else if (obj.field === 'score') {
                if (!zmnUtil.isEmptyNull(value)) {
                    let r = /^([1-9]\d{0,9}|0)$/;
                    if (!r.test(value)) {
                        layer.msg('格式内容不正确，请重新输入');
                        tempVal = '';
                    }
                    if (Number(value) > 99 || Number(value) < 1) {
                        layer.msg('请输入1~99范围内的整数');
                        tempVal = '';
                    }
                }
                obj.update({
                    score: tempVal
                });
            }
            // 重新渲染
            renderTable(tableData, index)
            console.log("编辑：", table.cache)
        });

    }


    function init() {
        /**
         * 【表单】初始化
         */
        initFormEvent();

        /**
         * 【表格】初始化
         */
        initTable(params.standardList);

        /**
         * 【表格事件】初始化
         */
        initTableEvent(params.standardList);
    }

    init();

    // 对外暴露的接口
    exports('oms_conf_attachment_orderPicture_auditStandard', {});
});

// 取消
function cancel() {
    let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    parent.layer.close(index);
}

